<template>
    <div>
        <el-form>
            <el-form-item label="非父子组件Child的值：">
                <el-input v-model="msgFromChild" />
            </el-form-item>
            <el-form-item label="待办事项：">
                <el-input v-model="text" />
            </el-form-item>
            <el-form-item label="">
                <el-button type="" @click="clearInput">清空</el-button>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button type="danger" @click="$emit('removeAll')">数据重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {ref,onMounted} from 'vue'
import bus from 'vue3-eventbus'
export default{
    name:'Event',
    props:{
        
    },
    setup(props,cxt){
        const text=ref("")
        const msgFromChild=ref("")
        const submit=function(){
            cxt.emit('toList',text.value)
            text.value=''
        }
        const clearInput=function(){
            text.value=''
        }
        onMounted(() =>{
            bus.on('getMsg',(value) =>{
                msgFromChild.value=value
            })
            
        })
        return{
            text,
            submit,
            clearInput,
            msgFromChild
        }
    }
}
</script>
<style>

</style>